<div class="ruku-modal-backdrop" *ngIf="visible">
  <div class="ruku-modal-dialog">
    <div class="modal-header">
      <span>新增入库单</span>
      <button type="button" class="close" (click)="onClose()">×</button>
    </div>
    <form [formGroup]="form" (ngSubmit)="onSave()">
      <div class="ruku-modal-body">
        <h4>基础信息</h4>
        <div class="form-grid">
          <div class="form-item">
            <label>入库单号</label>
            <input formControlName="ruKuNo" placeholder="自动获取或系统生成">
          </div>
          <div class="form-item">
            <label>入库类型</label>
            <input formControlName="ruKuType">
          </div>
          <div class="form-item">
            <label>入库状态</label>
            <input formControlName="ruKuStatus">
          </div>
          <div class="form-item">
            <label>入库日期</label>
            <input type="date" formControlName="ruKuDate">
          </div>
          <div class="form-item">
            <label>仓库名称</label>
            <input formControlName="storehouseName">
          </div>
          <div class="form-item">
            <label>关联单号</label>
            <input formControlName="connectNo">
          </div>
          <div class="form-item">
            <label>货品名称</label>
            <input formControlName="itemName">
          </div>
          <div class="form-item">
            <label>经办人</label>
            <input formControlName="attnName">
          </div>
          <div class="form-item">
            <label>入库数量</label>
            <input formControlName="ruKuNum">
          </div>
          <div class="form-item">
            <label>入库金额</label>
            <input formControlName="ruKuPrice">
          </div>
          <div class="form-item">
            <label>所在部门</label>
            <input formControlName="departName">
          </div>
          <div class="form-item">
            <label>审核人</label>
            <input formControlName="shenName">
          </div>
          <div class="form-item">
            <label>审核时间</label>
            <input type="date" formControlName="shenDate">
          </div>
          <div class="form-item">
            <label>供应商</label>
            <input formControlName="provider">
          </div>
          <div class="form-item">
            <label>联系人</label>
            <input formControlName="phoneName">
          </div>
          <div class="form-item">
            <label>联系方式</label>
            <input formControlName="phoneNum">
          </div>
          <div class="form-item form-item-full">
            <label>备注</label>
            <textarea formControlName="remark" rows="2" style="width:100%"></textarea>
          </div>
          <div class="form-item form-item-full">
            <label>图片</label>
            <input type="file" (change)="handleFileInput($event)">
            <img *ngIf="imagePreview" [src]="imagePreview" style="max-width:100px;max-height:100px;margin-left:12px;vertical-align:middle;">
          </div>
        </div>
        <h4 style="margin-top:24px;">入库明细</h4>
        <button type="button" class="btn-add-detail" (click)="addDetail()">+ 添加明细</button>
        <div class="table-scroll">
          <table class="table">
            <thead>
              <tr>
                <th>货品名称</th><th>货品类型</th><th>规格型号</th><th>单位</th><th>当前库存</th><th>已入库数量</th><th>入库数量</th><th>未入库数量</th><th>进货单价</th><th>进货金额</th><th>入库库位</th><th>本次入库数量</th><th>批次号</th><th>生产日期</th><th>备注</th><th>入库类型</th><th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let d of details.controls; let i = index" [formGroup]="d">
                <td><input formControlName="itemName"></td>
                <td><input formControlName="goodsType"></td>
                <td><input formControlName="goodsSpec"></td>
                <td><input formControlName="unit"></td>
                <td><input formControlName="currentNum"></td>
                <td><input formControlName="purchaseNum"></td>
                <td><input formControlName="yiRuNum"></td>
                <td><input formControlName="weiRuNum"></td>
                <td><input formControlName="purchasePrice"></td>
                <td><input formControlName="purchaseJine"></td>
                <td><input formControlName="ruLocation"></td>
                <td><input formControlName="benRuNum"></td>
                <td><input formControlName="piCiNo"></td>
                <td><input type="date" formControlName="createdate"></td>
                <td><input formControlName="remarks"></td>
                <td><input formControlName="ruKuType"></td>
                <td><button type="button" class="btn-remove-detail" (click)="removeDetail(i)">移除</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-cancel" (click)="onClose()">取消</button>
        <button type="submit" class="btn-save">保存</button>
      </div>
    </form>
  </div>
</div> 